<template>
    <div>
        MyComponents:{{ counter }}
        <button @click="counter+=1">Add</button>
        {{ title }}-{{ age }}
        {{ list }}

        <button @click="sendHandler">sendmsg</button>
    </div>
</template>

<script>
export default {
    name:"MyComponent",
    data(){
        return{
            counter:0,
            msg:'child Hello'
        }
    },
    // props:["title","age"]
    // props:{
    //     title:String,
    //     age:[Number,String]
    // }
    props:{
        title:{
            type:String,
            default:'默认值'
        },
        age:{
            type:[Number,String],
            required:true
        },
        list:{
            type:Array,
            // default:["默认值"]
            default:function(){
                return ["default"]
            }
        }
    },
    methods:{
        sendHandler(){
            // 参数1：父组件要实现的事件名称
            // 参数2：要传递的数据
            this.$emit("onChildEvent",this.msg)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
